<template>
  <div class="breadcrumb-content">
    <div @click="isCollapseFn" class="breadcrumb-icon">
      <el-icon v-if="isCollapse"><Expand /></el-icon>
      <el-icon v-else><Fold /></el-icon>
    </div>
    <div class="breadcrumb-txt">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="{ path: item.path }">
          {{item.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>
<script setup>
  import { watch, ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'

  const emit = defineEmits(["collapseChange"])
  const props = defineProps(['isCollapse']) 

  const router = useRouter();
  const route = useRoute();

  const breadcrumbList = ref([]);

  
  watch(() => route.path, (newPath) => {
    // console.log('页面变化了', newPath);
    if (route.meta.level == 1) {
      // 首页
      breadcrumbList.value = [{ path: '/home', name: '首页' }];
      sessionStorage.setItem('menu', JSON.stringify(breadcrumbList.value));
    } else if (route.meta.level == 2) {
      // 菜单页
      breadcrumbList.value = [{ path: '/home', name: '首页' }];
      breadcrumbList.value.push({ path: route.path, name: route.meta.title });
      sessionStorage.setItem('menu', JSON.stringify(breadcrumbList.value));
    } else if (route.meta.level == 3) {
      // 文献阅读页面, 隐藏
      // breadShow.value = false;
      // isCollapse.value = true
      // breadShow.value = true
      // console.log(route.query.task);
      breadcrumbList.value = JSON.parse(sessionStorage.getItem('menu'));
      // console.log(breadcrumbList.value);
      // console.log(sessionStorage.getItem(route.query.task));
      breadcrumbList.value.push({ path: '', name: sessionStorage.getItem(route.query.task) });
    }
  });

  onMounted(() => {
    breadcrumbList.value = JSON.parse(localStorage.getItem('menu'));
  })

  const isCollapse = ref(false)
  const isCollapseFn = () => {
    isCollapse.value = !isCollapse.value;
    emit('collapseChange')
  }

</script>
<style scoped>
.breadcrumb-content {
  height: 48px;
  background: var(--background);
  align-items: center;
  display: flex;
  padding: 0 12px;
  color: var(--txt-color);
}
.breadcrumb-icon{
  width: 28px;
  height: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
.breadcrumb-icon:hover {
  background: var(--sidebar-hover);
}
.breadcrumb-icon .el-icon {
  color: var(--txt-color);
  font-size: 20px;
}
.breadcrumb-txt {
  margin-left: 30px
}
.breadcrumb-txt .el-breadcrumb {
  font-size: 14px;
}
::v-deep .el-breadcrumb__inner.is-link, ::v-deep .el-breadcrumb__inner a:hover, ::v-deep .el-breadcrumb__inner.is-link:hover, ::v-deep .el-breadcrumb__item {
  color: var(--txt-color);
}
</style>
